<template>
	<view class="animated fadeIn faster">
		<loadings v-if="loadings"></loadings>
		<view class="">
			<image :src="detail.activity_image" mode="widthFix" style="width: 750rpx;"></image>
		</view>
		<view class="py-2 px-3 mb-2 bg-fff">
			<view class="font32 color000 mb-1">{{detail.activity_name}}</view>
			<view class="d-flex d-flex-between d-flex-middle">
				<view class="d-flex">
					<image src="https://110020.oss-cn-hangzhou.aliyuncs.com/xo/workgroup-people.png" style="width: 36rpx;height: 36rpx;"></image>
					<text class="colorgrayy font26 ml-1">计划招收{{detail.activity_number}}人</text>
				</view>
				<view style="background-color: #46c37b;padding: 6rpx 20rpx;color:#ffffff;border-radius: 30rpx;font-size: 24rpx;">免费</view>
			</view>
		</view>
		<view class="pt-2 pb-1 px-3 mb-2 bg-fff">
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">开始时间：</view>
				<view class="d-flex-item">{{detail.train}}</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">报名时间：</view>
				<view class="d-flex-item">{{detail.enroll}}</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">集合地址：</view>
				<view class="d-flex-item">{{detail.activity_address}}</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">机构名称：</view>
				<view class="d-flex-item">{{detail.activity_institution}}</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">联系方式：</view>
				<view class="d-flex-item">{{detail.activity_phone}}</view>
			</view>
		</view>
		
		<view class="pt-2 pb-1 px-3 mb-2 bg-fff">
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="font30 font-bold">课程介绍</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">讲师介绍：</view>
				<view class="d-flex-item">{{detail.activity_teacher}}</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-2">
				<view class="colorgrayy w-15">计划人数：</view>
				<view class="d-flex-item">{{detail.activity_number}}人</view>
			</view>
		</view>
		<view style="height: 170rpx;"></view>
		<view class="c-fix">
			<view class="c-fill d-flex d-flex-between d-flex-middle">
				<view class="d-flex d-flex-column d-flex-middle d-flex-center" @click="goFav()">
					<text class="iconfont font34" :class="fav?'main-color icon-shoucangxiao':'icon-shoucang color666'"></text>
					<text class="font22" :class="fav?'main-color':'color666'">收藏</text>
				</view>
				<view class="buy-now d-flex d-flex-center d-flex-middle" @click="goEnroll()">立即报名</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { userApi } from '@/http/userApi.js'
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				loadings:true,
				fav:false,
				detail:{
					activity_address: "湖北省武汉市洪山区武汉城市职业学院",
					activity_image: "https://recruit-1314351529.cos.ap-nanjing.myqcloud.com/banners/Kj1Vs8ikkFrpEb19uNOqC48we1mAe6PlJaZYLsp2.png",
					activity_institution: "武汉城市职业学院",
					activity_name: "计算机操作系统漏洞管理",
					activity_number: 50,
					activity_phone: "15474151245",
					activity_teacher: "苏伊士",
					created_at: "2024-09-30 11:00:01",
					enroll: "2024-10-30 10:59:00-2024-11-30 10:59:00",
					id: 12,
					train: "2024-11-30 10:57:00-2024-12-30 10:57:00",
					updated_at: "2024-09-30 11:00:01",
				}
			}
		},
		onLoad(e) {
			if(e.obj){
				this.detail = JSON.parse(decodeURIComponent(e.obj));
				this.loadings = false
			}else{
				uni.showToast({
					title:'未找相关课程',
					icon:'none'
				})
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1500)
			}
		},
		methods: {
			async init(cid){
				let that = this
				try{
					const result = await userApi.queryDetail(cid)
					that.loadings = false
					that.detail = result
				}catch(e){
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}
			},
			async goEnroll(){
				let that = this
				if(store.state.loginStatus){
					if(store.state.verify == 1){
						const inEnroll = {
							'user_id':uni.getStorageSync('myId'),
							'activity_id':that.detail.id
						}
						
						try{
							uni.showLoading({
								title:'报名中...'
							})
							await userApi.inEnroll(inEnroll)
							uni.hideLoading()
							uni.showToast({
								title:'报名成功',
								duration:1500,
								complete() {
									setTimeout(()=>{
										uni.switchTab({
											url:'/pages/index/index'
										})
									},1500)
								}
							})
						}catch(e){
							uni.hideLoading()
						}
					}else{
						uni.showToast({
							title:'未报名，请先报名！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/enroll/enroll'
							})
						},1500)
					}
				}else{
					uni.showToast({
						title:'未登录，请登录',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
			},
			async goFav(){
				let that = this
				if(that.fav){
					that.fav = false
					return
				}
				if(store.state.loginStatus){
					if(store.state.verify == 1){
						const inEnroll = {
							'user_id':uni.getStorageSync('myId'),
							'activity_id':that.detail.id
						}
						try{
							uni.showLoading({
								title:'报名中...'
							})
							await userApi.collected(inEnroll)
							that.fav = true
							uni.hideLoading()
						}catch(e){
							uni.hideLoading()
						}
					}else{
						uni.showToast({
							title:'未报名，请先报名！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/enroll/enroll'
							})
						},1500)
					}
				}else{
					uni.showToast({
						title:'未登录，请登录',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
			}
		}
	}
</script>

<style>
.c-fix{
	position: fixed;
	background: #fff;
	z-index: 98;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom)
}
.c-fill{
	height: 100rpx;
	padding-top: 10rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.buy-now {
	background: linear-gradient(-41deg, #ff2000, #f10000 24%, #c90101);
	color: #fff;
	width: 250rpx;
	font-size: 28rpx;
	height: 66rpx;
	border-radius: 40rpx;
}
</style>
